<script lang="ts" setup>
import { reactive, ref } from 'vue'
import treeSelect from '@/components/tree-select-edl/index.vue'
import TreeUtilDTO from '@/utils/tree'

const emits = defineEmits(['saveEventClick'])
const props = defineProps({
  treeData: {
    type: Array,
    default: () => [],
  },
})
const form = reactive({
  ajlb: '',
})

const treeQueryData = ref<any>([])

const defaultProps = {
  children: 'children',
  label: 'label',
}

const dialogVisible = ref(false)
/*
 * 打开弹框
 */
//
const openDialog = () => {
  queryTree()
  dialogVisible.value = true
}

/*
 * 查询树
 */
const queryTree = () => {
  const res = {
    data: [
      {
        ajbh: '',
        bh: '1',
        mc: '正卷',
        fbh: '',
        lx: '',
        mllxdm: '',
        mllxmc: '',
        sfdzajml: '',
        sfzzajml: '',
        mlsxh: '',
        mjdm: '',
        wh: '',
        zrz: '',
        rq: '2024-03-25T02:45:14.519Z',
        zwys: 0,
        qfys: 0,
        dgys: 0,
        bz: '',
      },
      {
        ajbh: '',
        bh: '456',
        mc: '接收案件通知书',
        fbh: '1',
        lx: '',
        mllxdm: '',
        mllxmc: '',
        sfdzajml: '',
        sfzzajml: '',
        mlsxh: '',
        mjdm: '',
        wh: '',
        zrz: '',
        rq: '2024-03-25T02:45:14.519Z',
        zwys: 0,
        qfys: 0,
        dgys: 0,
        bz: '',
      },
      {
        ajbh: '',
        bh: '485',
        mc: '起诉意见书',
        fbh: '1',
        lx: '',
        mllxdm: '',
        mllxmc: '',
        sfdzajml: '',
        sfzzajml: '',
        mlsxh: '',
        mjdm: '',
        wh: '',
        zrz: '',
        rq: '2024-03-25T02:45:14.519Z',
        zwys: 0,
        qfys: 0,
        dgys: 0,
        bz: '',
      },
      {
        ajbh: '',
        bh: '3',
        mc: '副卷',
        fbh: '',
        lx: '',
        mllxdm: '',
        mllxmc: '',
        sfdzajml: '',
        sfzzajml: '',
        mlsxh: '',
        mjdm: '',
        wh: '',
        zrz: '',
        rq: '2024-03-25T02:45:14.519Z',
        zwys: 0,
        qfys: 0,
        dgys: 0,
        bz: '',
      },
      {
        ajbh: '',
        bh: '528',
        mc: '换押证',
        fbh: '3',
        lx: '',
        mllxdm: '',
        mllxmc: '',
        sfdzajml: '',
        sfzzajml: '',
        mlsxh: '',
        mjdm: '',
        wh: '',
        zrz: '',
        rq: '2024-03-25T02:45:14.519Z',
        zwys: 0,
        qfys: 0,
        dgys: 0,
        bz: '',
      },

      {
        ajbh: '',
        bh: '658',
        mc: '提讯，提解',
        fbh: '3',
        lx: '',
        mllxdm: '',
        mllxmc: '',
        sfdzajml: '',
        sfzzajml: '',
        mlsxh: '',
        mjdm: '',
        wh: '',
        zrz: '',
        rq: '2024-03-25T02:45:14.519Z',
        zwys: 0,
        qfys: 0,
        dgys: 0,
        bz: '',
      },
    ],
  }
  //处理数据
  treeQueryData.value = TreeUtilDTO.getTreeData(res.data, 'bh', 'fbh')

  //   const params = {
  //     gdbh: '1',
  //     mlmc: '2',
  //     mlxslx: '3',
  //   }
  //   wsjzglService
  //     .queryAjmls(params)
  //     .then((res) => {
  //       //
  //     })
  //     .catch((err) => {
  //       !err.isError && ElMessage({ type: 'warning', message: err.message })
  //       console.log(err)
  //     })
}

/*
 * 拖拽节点
 */

const handleDrop = (draggingNode: Node, dropNode: Node) => {
  console.log(draggingNode, '被拖拽节点的数据')
  console.log(dropNode, '最后进入的节点')
}

// 点击确定按钮
const saveData = () => {
  emits('saveEventClick')
  dialogVisible.value = false
}

defineExpose({ openDialog })
</script>

<template>
  <el-dialog v-model="dialogVisible" title="新增案件" width="50%" :close-on-click-modal="false">
    <div class="dialog-top">
      <el-form ref="form" class="form-style" :inline="true" label-width="100px" :model="form">
        <el-form-item label="案件类别:" style="width: 30%">
          <!-- 树形选择框 -->
          <tree-select
            style="width: 100%"
            :modelValue="form.ajlb"
            searchPlaceholder="请选择案件类别"
            :options="props.treeData"
            clearable
          ></tree-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="dialog-bottom">
      <div class="bottom-left">
        <el-tree
          style="max-width: 600px"
          :data="treeQueryData"
          draggable
          node-key="bh"
          default-expand-all
          :props="defaultProps"
          @node-drop="handleDrop"
        >
          <template #default="{ data }">
            <div class="custom-tree-node">
              <el-icon><FolderOpened /></el-icon>
              <span>
                {{ data.mc }}
              </span>
            </div>
          </template>
        </el-tree>
      </div>
      <div class="bottom-right"></div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" style="margin-left: 10px" @click="saveData">确定</el-button>
        <el-button type="default" style="margin-left: 10px" @click="dialogVisible = false"
          >取消</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.dialog-bottom {
  display: flex;
  width: 100%;
  .bottom-left {
    width: 30%;
    border: 1px solid #dae4f1;
    min-height: 500px;
  }
  .bottom-right {
    width: 70%;
  }
}
</style>
